<template>
    <div class="search-box">
      <el-form :inline="true" ref="ruleForm" :model="state.formInline" class="demo-form-inline">
        <el-form-item v-for="(item, index) in formItemList" :key="index" :label="item.label">
          <!-- 下拉选择框 -->
          <el-select v-if="item.type == 'select'" v-model="state.formInline[item.param]" :multiple="item.multiple" :collapse-tags="item.collapse" placeholder="请选择" clearable>
            <el-option v-for="(item2, index2) in item.selectOptions" :key="index2" :label="item2.label" :value="item2.value"></el-option>
          </el-select>
          <!-- 下拉选择框end -->
          <!-- 输入框 -->
          <el-input v-if="item.type == 'input'" v-model="state.formInline[item.param]" size="default" placeholder="请输入" clearable></el-input>
          <!-- 输入框 -->
          <!-- 日期范围选择框 -->
          <el-date-picker v-if="
              item.type == 'daterange' ||
              item.type == 'datetimerange' ||
              item.type == 'date' ||
              item.type == 'datetime'
            " v-model="state.formInline[item.param]" :value-format="item.valueFormat || 'YYYY-MM-DD'" :format="item.format || 'YYYY-MM-DD'" clearable :type="item.type || ''" :range-separator="item.rangeSeparator || '至'" :start-placeholder="item.startPlaceholder" :end-placeholder="item.endPlaceholder" placeholder="请选择" size="default">
          </el-date-picker>
          <!-- 日期范围选择框end -->
          <!-- 级联选择器 -->
          <!-- <el-cascader v-if="item.type == 'cascader'" v-model="state.formInline[item.param]" size="default" :options="item.options" :props="item.props" clearable></el-cascader> -->
          <!-- 级联选择器end style="width: 10rem;position: absolute;right:10px;"-->
        </el-form-item>
        <slot name="formItem"></slot>
  
        <el-form-item>
         <div  class="btnBox">
            <el-button type="primary" size="default" @click="onSubmit" >
            <el-icon color="#fff" style="margin-right: 5px;">
            <Search />
          </el-icon>
            查询
          </el-button>
          <el-button type="" size="default" @click="resetForm('ruleForm')" >
            <Refresh style="width: 1em; height: 1em; margin-right: 8px" />
            重置
          </el-button>
         </div>
        </el-form-item>
  
        <!-- 可用于显示其他按钮 -->
        <slot name="formButton"></slot>
      </el-form>
    </div>
  </template>
  
  <script setup>
  import {
    reactive,
    onMounted,
    toRefs,
    getCurrentInstance,
    watch,
    ref,
    defineExpose
  } from "vue";
  import { useRouter, useRoute,} from "vue-router";
  const emit = defineEmits(["search"]);
  const props = defineProps({
    emitSearch: false,
    emitSearchSpecial: {
      // 完整率是否立即执行搜索
      type: Boolean,
      default: false,
    },
    formItemList: {
      type: Array,
    //   default() {
    //     return [
    //       {
    //         label: "下拉框",
    //         type: "select",
    //         selectOptions: [{ text: 111, value: 111 }],
    //         param: "company",
    //         defaultSelect: "222", // 下拉框默认选中项
    //         multiple: false,
    //       },
    //       {
    //         label: "输入框",
    //         type: "input",
    //         param: "name",
    //       },
    //       {
    //         label: "日期范围",
    //         type: "daterange",
    //         param: "createtime",
    //       },
    //       {
    //         label: "级联选择器",
    //         type: "cascader",
    //         param: "cascader",
    //         options: [],
    //         props: { multiple: false },
    //       },
    //     ];
    //   },
    },
  });
  const state = reactive({
    formItemList: props.formItemList,
    formInline: {},
  });

  // 获取当前路由
  const route = useRoute();
  // 获取路由实例
  const router = useRouter();
  
  //监听搜索条件数据
  watch(
    () => props.formItemList, //route
    (newVal, oldVal) => {
      console.log(newVal,oldVal,'oldVal')
      for (const obj of props.formItemList) {
        state.formInline[obj.param] = obj.defaultSelect ? obj.defaultSelect : "";
      }
    },
    {
      immediate: true,
      deep: true,
    }
  );
  //监听是否立即搜索
  watch(
    () => props.emitSearch, //route
    (newVal, oldVal) => {
    if (!props.emitSearchSpecial) {
        //为了区分周跳比等
        emit("search", state.formInline);
    }
    },
    {
      immediate: true,
      deep: true,
    }
  );
  let a= ref(2)
  onMounted(() => {});
  const onSubmit = () => {
    console.log(state.formItemList,'点击子组件的查询')
    emit("search", state.formInline);
  };
//   在vue2中通过this来拿到当前组件实例，但是在vue3中通过getCurrentInstance拿到当前组件实例
  const { proxy } = getCurrentInstance();
  const resetForm = (formName) => {
  proxy.$refs[formName].resetFields();
  //   let formInlineNew = {};
  for (const obj of state.formItemList) {
    state.formInline[obj.param] = obj.defaultSelect || ""; // 重置时下拉框的默认值如果要保留就选用这个
    // formInlineNew[obj.param] = ""; // 所有筛选条件清空
  }
  emit("search", state.formInline);
  //   state.formInline = formInlineNew;
};
  defineExpose({
    ...toRefs(state),
    resetForm,
    onSubmit,
  });
  </script>
  
  <style lang="scss" scoped>
  .search-box {
    width: 100%;
    height: 68px;
    background: #fff;
    border-radius: 0px 0px 0px 0px;
    opacity: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 7px;
    // padding: 0 10px;
    margin-bottom: 24px;
    :deep(.el-form-item) {
      margin-bottom: 0;
    }
  }
  .btnBox {
    position: relative;
    right: 10px;
  }
  </style>
  